const path = require('path')
// 启用热更新的第二步
// const webpack = require('webpack')

//导入 html-webpack-plugin ：可以在内存中生成html页面
// 自动在内存中生成html页面；
//自动把内存中打包好的bundle.js添加到内存中html页面中引用
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');


//这个配置文件，通过nodeJs中的模块操作，向外暴露了一个配置对象
module.exports = {
    //入口，表示 webpack 要打包哪个文件
    entry:path.join(__dirname, './src/main.js'),
    //输出文件相关配置
    output: {
        //指定输出的路径
        path: path.join(__dirname, './dist'),
        //指定输出文件的名称
        filename: 'bundle.js'
    },

    // devServer: {// 配置dev-server的第二种方式：
    //     //下面等同于 webpack-dev-server --open --port 3000 --contentBase src --hot
    //     open: true, //自动打开浏览器
    //     port: 3000, //设置运行端口
    //     contentBase: 'src', //指定托管目录
    //     hot: true, //启用热更新 的第一步
    // },

    plugins:[ // 配置插件的节点
        //new webpack.HotModuleReplacementPlugin(), //启用热更新第三步， 新建一个热更新模块对象

        new htmlWebpackPlugin({ // 创建一个在内存中生成html的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html', // 指定生成页面的名称
        }),
        new VueLoaderPlugin()
    ],

    module: { //用于配置所有第三方模块加载器
        rules: [ // 所有第三方模块的匹配规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']}, //配置处理 .css 文件的第三方loader规则
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, //配置处理 .less 文件的第三方loader规则
            {test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']}, //配置处理 .scss 文件的第三方loader规则
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=43524&name=[hash:8]-[name].[ext]'}, //配置处理 请求url文件的第三方loader规则。
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, //配置处理 请求字体文件的第三方loader规则。
            /**
             * 通过？来传参数:
             * limit(最大值) =》小于最大值进行转base64. 
             * name=[name].[ext] 表示名字跟之前名字相同,后缀名也相同
             * [hash:8] 表示自动设置前8位哈希值
             */
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, //配置处理 .js 文件的第三方loader规则。把ES6等高级语法转换为可识别低级语法。
            /**
             * 通过 exclude 来排除不需要转换的目录。
             */
            {test: /\.vue$/, use: 'vue-loader'}, //配置处理 .vue 文件的第三方loader规则
        ]
    },
    resolve: {
        alias: { //修改Vue被导入包的时候的路径
            //'vue$': 'vue/dist/vue.js'
        }
    },
}

/**
 * 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
 *  1、 npm i webpack-dev-server -D 安装工具到本地开发环境内
 *  2、由于在项目中安装，无法使用脚本命令直接使用,且需要在本地也要安装webpack
 *  3、webpack-dev-server帮我们打包生成的bundle.js文件，并没有放在物理磁盘中；而是，直接托管到了电脑的内存中。
 *    所以我们找不到这个bundle.js
 *  4、配置：webpack-dev-server --open --port 3000 --contentBase src --hot
 *    表示：--open（自动打开浏览器） --port（设置端口） --contentBase（设置打开路径） --hot（热重载，不刷新）
 */

/**
 * 使用 html-webpack-plugin 在内存中生成html页面
 * 自动在内存中生成html页面；
 * 自动把内存中打包好的bundle.js添加到内存中html页面中引用
 */

/**
 * 使用 style-loader css-loader 来进行css文件的处理
 * 安装： npm i style-loader css-loader -D
 *  1、在 webpack.config.js 中新增配置节点， 叫做 module。在它上面有个 rules 属性，存放所有第三方文件的匹配和处理规则
 *  2、loader中rules的调用规则为：数组内 从后向前调用
 */

/**
 *  .less 文件的处理，依赖 less-loader 模块，其中 less-loader 以来 less
 *  安装： npm i less less-loader -D
 */

/**
 *  .scss 文件的处理，依赖 sass-loader 模块
 *  安装： npm i sass-loader -D
 */

/**
 * 使用 url-loader 进行 css文件 中的url地址进行处理. 其中，它 依赖于 file-loader 模块
 * 安装： npm i url-loader file-loader -D
 */

/**
 * 使用  babel 来处理 ES6、ES7 的新语法. 使用以下两套包进行转化：
 * 安装：npm i babel-core babel-loader babel-plugin-transform-runtime -D
 * 安装：npm i babel-preset-env babel-preset-stage-0 -D
 * 在 webpack.config.js 中，添加新的匹配规则
 * 在项目的根目录中， 新建一个叫做 .babelrc 的babel配置文件，这个配置文件是json格式,如下：
 *  {
 *      "presets":["env", "stage-0"],
 *      "plugins":["transform-runtime"]
 *  }
 */

 /**
  * 使用 vue-loader 进行 .Vue 文件的转换
  * 安装： npm i vue-loader vue-template-compiler -D
  * webpack.config.js 配置规则
  */

  /**
   * 使用 babel-plugin-transform-remove-strict-mode 来去除webpack打包时的 严格模式
   * 安装：npm i babel-plugin-transform-remove-strict-mode -D
   * 配置 .babelrc 
     {
        "plugins": ["transform-remove-strict-mode"]
     }
   */